<template>
  <div class>
    <n-card title="props" style="margin-bottom: 16px">
      <n-tabs type="line">
        <n-tab-pane name="oasis" tab="父子props">
          <the-props :list="parentList" @handleDel="handleDel"></the-props>
        </n-tab-pane>
        <n-tab-pane name="emits" tab="子调父emit">
          <ul>
            <li v-for="(item, index) in parentList" :key="item + index">{{ item }}</li>
          </ul>
          <the-emit @handleAdd="handleAdd" ref="testRef"></the-emit>
          <button @click="getSonData">获取子组件数据</button>
        </n-tab-pane>
        <n-tab-pane name="model" tab="v-model方式">
          <ul>
            <li v-for="(item, index) in parentList" :key="item + index">{{ item }}</li>
          </ul>
          <the-model v-model:list="parentList"></the-model>
        </n-tab-pane>

        <n-tab-pane name="ref" tab="refs方式">
          <ul>
            <li v-for="(item, index) in childRefs?.list" :key="item + index">{{ item }}</li>
          </ul>

          <the-refs ref="childRefs"></the-refs>
        </n-tab-pane>

        <n-tab-pane name="textarea" tab="v-bind的css使用">
          <span class="csSpan"> bind绑定css </span>
          <button @click="changeColor">切换颜色</button>
        </n-tab-pane>

        <n-tab-pane name="computed" tab="计算属性的使用">
          <div class="">
            <input type="text" v-model="sumName.surname" placeholder="请输入姓" />
            <input type="text" v-model="sumName.name" placeholder="请输入名字" />
            <div class="">当前姓名：{{ fullName }}</div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup>
import TheProps from '@/components/Transmission/TheProps.vue'
import TheEmit from '@/components/Transmission/TheEmit.vue'
import TheModel from '@/components/Transmission/TheModel.vue'
import TheRefs from '@/components/Transmission/TheRefs.vue'
import {ref,reactive, computed, watch} from 'vue'

const parentList = ref(['js','vue','react'])
const childRefs = ref(null)
const testRef = ref()
const colorState = reactive({
color: 'red'
})

let sumName = reactive({
    surname:'王',
    name:'海涛'
})

  

//删除
const handleDel = (index)=>{
parentList.value.splice(index,1)
}

//添加
const handleAdd=(val)=>{
    parentList.value.push(val)
}

//获取子调父子组件的值
const getSonData=()=>{
    console.log(testRef.value.obj)
}

//v-bind改变css
const changeColor =()=>{
    colorState.color=colorState.color=='red'?'blue':'red'
}

const aaa = ()=>{
    console.log("界面初始化了")
}


const fullName =computed(()=>{
    return sumName.surname+sumName.name
})


watch(sumName,(newValue,oldValue)=>{
    console.log(oldValue)
    console.log(`new---${newValue.surname}`)
    // console.log(`old---${oldValue}`)
},{immediate:true,deep:true})




</script>


<style  scoped>
.csSpan {
  /* 使用v-bind绑定state中的变量 */
  color: v-bind('colorState.color');
}
</style>